<template>
	<view class="home pageBg">
		
		<nav-top title='推荐'></nav-top>
		<!-- 轮播图 -->
		<banner></banner>
		<!-- 公告页 -->
		<TopNotice></TopNotice>
		<!-- 推荐页 -->
		<view class="select">
			<common-select>
				<template #name>每天推荐</template>
				<template #day>
					<view class="date">
						<uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
						<view class="text">
							<uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
						</view>
					</view>
				</template>
			</common-select>
			<view class="content">
				<scroll-view scroll-x>
					<view class="box" v-for="item in 6" @click="GoPrtview">
						
						<image src="../../common/img/1.png" mode="aspectFill"></image>
						
					</view>
				</scroll-view>
			</view>

			<view class="theme">
				<common-select>
					<template #name>专题精选</template>
					<template #day>
						<navigator url="/pages/classify/classify" open-type="reLaunch" class="more">
							
						
							<view class="text">更多</view>
						
							
						</navigator>
						
					</template>	
					
				</common-select>
				<view class="content">
					<theme-item v-for="item in 8"></theme-item>
					<theme-item :isMore="true"></theme-item>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const GoPrtview=()=>{
		uni.navigateTo({
			url:"/pages/preview/preview"
		})
	}
</script>

<style lang="scss" scoped>
.home {
	.select {
		padding-top: 50rpx;

		.theme {
			padding: 50rpx 0;

			.more {
				font-size: 30rpx;
				color: #888;
			}

			.content {
				margin-top: 30rpx;
				padding: 0 30rpx;
				display: grid;
				gap: 15rpx;
				grid-template-columns: repeat(3, 1fr);
			}
		}

		.date {
			color: #28b389;
			display: flex;
			align-items: center;

			.text {
				margin-left: 5rpx;
			}
		}

		.content {
			width: 720rpx;
			//height: 60rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;

			scroll-view {
				white-space: nowrap;

				.box {
					width: 200rpx;
					height: 430rpx;
					display: inline-block;
					margin-left: 15rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.box:last-child {
					margin-right: 30rpx;
				}
			}
		}
	}
}
</style>
